<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="com.example.admanagement.Ad" %>
<%@ page import="com.example.admanagement.AdService" %>
<%@ page import="com.example.admanagement.AdService.Result" %>
<html>

<head>
    <title>广告展示页面</title> <!-- 这里设置了一个具体的页面标题，可根据实际修改 -->
    <link rel="stylesheet" href="../css/nav.css" />
    <link rel="stylesheet" href="../css/content.css" />
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../css/shouye_fenlei.css">
    <link rel="stylesheet" href="../css/ad_display.css">
</head>

<body>
<h1></h1> <!-- 这里添加了一些描述性文字，可按需调整 -->
<button class="reset-ad-btn" onclick="resetAdClosed()">重置广告</button>
<jsp:include page="../user/nav.jsp"/>
<div class="fenlei">
    <p>分类：</p>
    <input class="fenlei_btn" type="button" value="全部"/>
    <input class="fenlei_btn" type="button" value="美甲"/>
    <input class="fenlei_btn" type="button" value="美容"/>
</div>
<div class="shouye">
    <a href="#"><input class="btn" type="button" value="最新"/></a>
    <input class="btn" type="button" value="最热"/>
    <br />
    <ul>
        <li>
            <a href="xiangmu.jsp"><img src="../img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
        <li>
            <a href="xiangmu.jsp"><img src="../img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
        <li>
            <a href="xiangmu.jsp"><img src="../img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
        <li>
            <a href="xiangmu.jsp"><img src="../img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
        <li class="second">
            <a href="xiangmu.jsp"><img src="./img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
        <li>
            <a href="xiangmu.jsp"><img src="./img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
        <li>
            <a href="xiangmu.jsp"><img src="./img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
        <li>
            <a href="xiangmu.jsp"><img src="./img/picture.png" alt="" width="250px"/>
                <p>法式美甲<br>120元10次浏览</p></a>
        </li>
    </ul>
</div>
<!-- 广告弹窗 -->
<div id="ad-popup" class="ad-popup">
    <%
        AdService.Result<List<Ad>> result = AdService.getAdsFromDatabase();
        List<Ad> adList = null; // 先在外层定义adList变量
        if (result.isSuccess()) {
            adList = result.getData();
            if (adList!= null && adList.size() > 0) { // 修改此处判断条件，确保adList不为空且有元素
                Ad firstAd = adList.get(0);
    %>
    <div class="ad-popup-content">
        <img src="<%= firstAd.getImagePath() %>" alt="<%= firstAd.getTitle() %>">
        <h2 class="ad-popup-title"><%= firstAd.getTitle() %></h2>
        <a class="ad-popup-link" href="<%= firstAd.getLink() %>"><%= firstAd.getLink() %></a>
        <p class="ad-popup-description"><%= firstAd.getDescription() %></p>
    </div>
    <div class="ad-popup-buttons">
        <span class="ad-popup-close" onclick="closeAdPopup()">关闭</span>
        <span class="ad-popup-never-show" onclick="neverShowAdPopup()">不再显示</span>
    </div>
    <%
            }
        }
    %>
</div>

<!-- 遮罩层 -->
<div id="overlay" class="overlay"></div>

<script>

    function resetAdClosed() {
        localStorage.removeItem('adClosed'); // 直接删除该键值对，下次页面加载就会重新显示广告弹窗
        // 或者也可以设置为其他特定的值，比如
        // localStorage.setItem('adClosed', 'temp');
    }

    // 页面加载时检查广告是否已关闭
    window.onload = function () {
        const isAdClosed = localStorage.getItem('adClosed');
        if (isAdClosed!== 'forever') {
            showAdPopup();
        }
    };

    // 显示广告弹窗和遮罩层
    function showAdPopup() {
        const adPopup = document.getElementById('ad-popup');
        const overlay = document.getElementById('overlay');
        adPopup.style.display = "block";
        overlay.style.display = "block";
    }

    // 关闭广告弹窗和遮罩层，并记录本次关闭状态（仅本次刷新不再显示）
    function closeAdPopup() {
        const adPopup = document.getElementById('ad-popup');
        const overlay = document.getElementById('overlay');
        adPopup.style.display = "none";
        overlay.style.display = "none";
        localStorage.setItem('adClosed', 'temp');
    }

    // 关闭广告弹窗并设置为以后都不再显示
    function neverShowAdPopup() {
        const adPopup = document.getElementById('ad-popup');
        const overlay = document.getElementById('overlay');
        adPopup.style.display = "none";
        overlay.style.display = "none";
        localStorage.setItem('adClosed', 'forever');
    }
</script>
</body>

</html>